<template>
	<div class="resource-management">
        <nav-header>
			<template slot="menuBefore">
				<li><router-link to="/teaching/group/circle-group" tag="a">圈组列表</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>圈组管理</li>
		</nav-header>
		<template>
			<el-tabs v-model="activeName" @tab-click="changeInfo">
				<el-tab-pane label="教案管理" name="first">
					<div class="zh-table">
						<div class="zh-table-contents"
							v-loading="loading.status"
							:element-loading-text="loading.txt">
							<div class="table-origin">
								<el-table
								:data="listData"
								border
								style="width: 100%">
									<el-table-column
									prop="name"
									label="教案名"
									align="center"
									show-overflow-tooltip
									>
									</el-table-column>
									<el-table-column
									prop="origin_txt"
									label="教案类型"
									align="center"
									show-overflow-tooltip
									>
									</el-table-column>
									<el-table-column
									prop="create_name"
									label="上传人"
									align="center"
									show-overflow-tooltip
									>
									</el-table-column>
									<el-table-column
									prop="create_time"
									label="上传时间"
									align="center"
									show-overflow-tooltip
									>
									</el-table-column>
									<el-table-column
										align="center"
										label="操作"
									>
										<template slot-scope="scope">
											<!-- 预览类型--图片预览 --视频预览 --试卷（跳转） -->
											<el-button @click="viewResource(scope.row)" type="text" >预览</el-button>
											<el-button v-if="parseInt(scope.row.origin) === 2" @click="downTest(scope.row.id)" type="text" size="small">下载 </el-button>
											<el-button v-else @click="down(scope.row)" type="text" size="small">下载 </el-button>
											<el-button @click="deleteFile(scope.row)" type="text" size="small" class="delete-button">删除 </el-button>
								
										</template>
									</el-table-column>
								</el-table>
								<div class="table-pagination" v-if="total_number > 10">
									<el-pagination
										@size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										:current-page="listParam.page_index"
										:page-sizes="[10, 20, 30, 40, 50, 100]"
										:page-size="listParam.page_size"
										layout="total, sizes, prev, pager, next, jumper"
										:total="total_number">
									</el-pagination>
									<div class="pagination-button">
										<el-button 
											@click="getList"
											type="primary" icon="el-icon-refresh" 
											circle title="刷新数据" size="mini" >
										</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>

				<el-tab-pane label="公告管理" name="second">
					<div class="zh-table">
						<div class="zh-table-contents"
							v-loading="loading.status"
							:element-loading-text="loading.txt"
						>
							<div class="table-new-title">
								<el-table
									:data="listNewsData"
									border
									style="width: 100%">
									<el-table-column
										prop="name"
										label="公告标题"
										align="center"
										show-overflow-tooltip
										>
									</el-table-column>
									<el-table-column
										prop="content"
										label="公告内容"
										align="center"
										show-overflow-tooltip
										>
									</el-table-column>
									<el-table-column
										prop="create_time"
										label="公布时间"
										align="center"
										show-overflow-tooltip
										>
									</el-table-column>
									<el-table-column
										align="center"
										label="操作"
									>
										<template slot-scope="scope">
											<el-button  @click="lookOver(scope.row)" type="text" size="small">查看</el-button> 
											<el-button @click="deleteNews(scope.row)" type="text" size="small">删除 </el-button> 
										</template>
									</el-table-column>
								</el-table>
								<div class="table-pagination" v-if="total_numberNews > 10">
									<el-pagination
										@size-change="handleSizeChangeNews"
										@current-change="handleCurrentChangeNews"
										:current-page="listNewsParam.page_index"
										:page-sizes="[10, 20, 30, 40, 50, 100]"
										:page-size="listNewsParam.page_size"
										layout="total, sizes, prev, pager, next, jumper"
										:total="total_numberNews">
									</el-pagination>
									<div class="pagination-button">
										<el-button 
											@click="getNews"
											type="primary" icon="el-icon-refresh" 
											circle title="刷新数据" size="mini" >
										</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>

				<el-tab-pane label="帖子管理" name="third">
					<div class="zh-table">
						<div class="zh-table-contents"
							v-loading="loading.status"
							:element-loading-text="loading.txt"
						>
							<div class="table-new-title">
								<el-table
									:data="listPostData"
									border
									style="width: 100%">
									<el-table-column
										prop="title"
										label="帖子标题"
										align="center"
										show-overflow-tooltip
										>
									</el-table-column>
									<el-table-column
										prop="create_name"
										label="发布人"
										align="center"
										show-overflow-tooltip
										>
									</el-table-column>
									<el-table-column
										prop="create_time"
										label="公布时间"
										align="center"
										show-overflow-tooltip
										>
									</el-table-column>
									<el-table-column
										align="center"
										label="操作">
										<template slot-scope="scope">
											<el-button type="text" size="small">
												<a 
                                                    style="color: inherit;" 
                                                    target="_blank" 
                                                    :href="`${BASE_URL}/login?token=${BASE_token}&protocol=http&host=${urlHost}&routerUrl=group/postDetails?id=${scope.row.id}`">
                                                    详情
                                                </a>
											</el-button> 
											<el-button @click="deletePost(scope.row)" class="delete-button" type="text" size="small">删除</el-button> 
										</template>
									</el-table-column>
								</el-table>
								<div class="table-pagination" v-if="total_numberPost > 10">
									<el-pagination
										@size-change="handleSizeChangePost"
										@current-change="handleCurrentChangePost"
										:current-page="listPostParam.page_index"
										:page-sizes="[10, 20, 30, 40, 50, 100]"
										:page-size="listPostParam.page_size"
										layout="total, sizes, prev, pager, next, jumper"
										:total="total_numberPost">
									</el-pagination>
									<div class="pagination-button">
										<el-button 
											@click="getPosts"
											type="primary" icon="el-icon-refresh" 
											circle title="刷新数据" size="mini" >
										</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</template>
		<transition name="el-fade-in-linear" >
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox"
					v-loading="viewLoading.status"
					:element-loading-text="viewLoading.txt">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
						</nativeVideo>
					</div>
				</div>
			</div>
		</transition>
		
        <transition name="el-fade-in-linear" lock-scroll="false" >
			<div class="masking" :class="{ activeLive: isPDFActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>文档预览</span>
						<i class="el-icon-close" @click="viewPDFClose"></i>
					</div>
					<div class="masking-document">
                        <div class="pdf-View">
                            <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                        </div>
					</div>
				</div>
			</div>
		</transition>
		
        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>

		<el-dialog
			title="音频预览"
			:visible.sync="voiceVisible"
			width="auto"
			style="min-width:550px;"
			top="0"
			custom-class="imgVisible"
			:close-on-click-modal="false"
			:before-close="closeAudio">
			<div class="imgViewx">
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl"  controlsList="nodownload" autoplay>
				Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import nativeVideo from '../../public/nativeVideo';
import Global from '../../../tools/global.js';

export default {
	data() {
		return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
			activeName: 'first',
			loading:{
				status: false,
				txt: '获取数据...'
			},
			// 教案管理
			listData: [],
			loadingFileFinish: false,
			total_number: 0,
			listParam: {
				group_id: this.$route.params.id,
				type: 2,
				data_type: 2,
				page_index: 1,
				page_size: 5,
			},
			viewLoading:{
				status:false,
				txt:'加载数据...'
			},
			isActive: true,
			imgVisible: false,
			isPDFActive: true,
			voiceVisible:false,
			showVideoPlayer:false,
		    playParam:{play_url: '',},
			imgViewUrl: '',
			viwPdfParam:{
				src: '',
				loadedRatio: 0,
				page: 1,
				numPages: 0,
				rotate: 0,
			},
			voiceViewUrl: '',
			// 公告管理
			listNewsParam:{
				group_id: this.$route.params.id,
				type:4,
				data_type:2,
				page_index:1,
				page_size:5,
			},
			listNewsData:[],
			loadingNewsFinish:false,
			total_numberNews: 0,
			// 帖子管理
			listPostData: [],
			total_numberPost: 0,
			listPostParam: {
				page_index: 1,
				page_size: 5,
				group_id: this.$route.params.id,
            },
            urlHost: sessionStorage.getItem('host')
		};
	},
	created() {
		this.getList();
	},
	components: {
		// pdf,
		nativeVideo
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
         /**
         * 关闭音频播放
         */
        closeAudio() {
            this.voiceVisible = false;
            document.getElementById("voicepoauy").pause();
        },
		changeInfo(tab, event) {
			this.activeName = tab.name;

			if (this.activeName === 'first') {
				this.getList();
			} else if (this.activeName === 'second') {
				this.getNews();
			} else if (this.activeName === 'third') {
				this.getPosts();
			}
		},
		getUrl() {
			let temp = this.BASE_URL.split('//')
			return temp[0] + '/' + temp[1];
		},

		// 帖子管理
		getPosts() {
			this.loading.status = true;
			let success = (data=>{
				this.loading.status = false;
				this.listPostData = data.data.data;
				this.total_numberPost = data.data.data_sum;
			})
			let fail = (data => {
				this.loadingNews.status = false;
				this.$message.error(data.msg)
			})
			var params = {
				page_index: this.listPostParam.page_index,
				page_size: this.listPostParam.page_size,
				group_id: this.listPostParam.group_id,
			}
			//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
			this.$ajax.get('api/group/subject_group_chat', {params: params, func: {success: success, fail: fail}})
		},
		deletePost(obj) {
			let yes = ( data => {
				let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.listPostData.length - this.rowLen === 0) {
						if (this.listPostParam.page_index > 1) {
							this.listPostParam.page_index-- ;
						} else {
							this.listPostParam.page_index = 1;
						}
					}

					this.getPosts();
				});

				let params = {
					id: obj.id,
					status: '0'
				}

				this.$ajax.put('api/group/subject_group_chat', params, {func: {success: success}})
			})

			let cancel = ( data => {})
			this.e_confirm({yes: yes, cancel: cancel, txt: '确定将 ' + obj.title + ' 删除吗？'});
		},
		handleSizeChangePost(val) {
			this.listPostParam.page_index = 1;
			this.listPostParam.page_size = val;
			this.getPosts()
		},
		handleCurrentChangePost(val) {
			this.listPostParam.page_index = val;
			this.getPosts();
		},

		// 公告管理
		getNews(){
			this.loading.status = true;
			// this.loadingNewsFinish = true;
			let success = (data=>{
				// this.loadingNewsFinish = false;
				this.loading.status = false;
				// this.loading.status = (this.loadingFileFinish.status&&this.loadingNewsFinish.status) ? true:false;
				this.listNewsData = data.data.data;
				this.total_numberNews = data.data.data_sum;
			})
			let fail = (data => {
				this.loadingNews.status = false;
				this.$message.error(data.msg)
			})
			var params = {
				page:this.listNewsParam.page_index,
				size: this.listNewsParam.page_size,
				type:this.listNewsParam.type,
				group_id:this.listNewsParam.group_id,
				data_type:this.listNewsParam.data_type,
			}
			//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
			this.$ajax.get('api/group/group_something',{params: params,func:{success:success,fail:fail}})
		},
		handleSizeChangeNews(val) {
			this.listNewsParam.page_index = 1;
			this.listNewsParam.page_size = val;
			this.getNews()
		},
		handleCurrentChangeNews(val) {
			this.listNewsParam.page_index = val;
			this.getNews();
		},
		lookOver(obj){
			this.$alert(obj.content, obj.name, {
				dangerouslyUseHTMLString: true,
				showConfirmButton:false,
			}).then(({ value }) => {}).catch(() => {});	
		},
		deleteNews(obj){
			let yes = ( data => {
				let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.listNewsData.length - this.rowLen === 0) {
						if (this.listNewsParam.page_index > 1) {
							this.listNewsParam.page_index-- ;
						} else {
							this.listNewsParam.page_index = 1;
						}
					}

					this.getNews();
				});
				this.$ajax.delete('api/group/group_something',{params:{group_news_id:obj.id,origin:3},func:{success:success}})
			})

			let cancel = ( data => {})
			this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});
		},

		// 教案管理
		getList(){
			this.loading.status = true;
			// this.loadingFileFinish = true;

			let success = (data=>{
				// this.loadingFileFinish = false;
				this.loading.status = false;
				// this.loading.status = (this.loadingFileFinish.status && this.loadingNewsFinish.status) ? true:false;
				this.listData = data.data.data;
				this.total_number = data.data.data_sum;
			})

			let fail = (data => {
				this.loading.status = false;
				this.$message.error(data.msg)
			})

			var params = {
				page: this.listParam.page_index,
				size: this.listParam.page_size,
				type: this.listParam.type,
				group_id: this.listParam.group_id,
				data_type: this.listParam.data_type,
			}
			//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
			this.$ajax.get('api/group/group_something', {params: params, func: {success: success, fail: fail}})
		},
		pdfPageChange(val){
			this.viwPdfParam.page  = val;
		},
		error(err) {
			//this.$message.error('读取文件失败');
		},
		viewPDFClose(){
			this.isPDFActive = true
		},
		//关闭视频预览
		viewClose(){
			this.showVideoPlayer = false;
			this.isActive = true
	
		},
		//资源预览转发
		viewResource( obj ){
			if( obj.origin === 2 ){
				this.$router.push('/teaching/group/paper-view/' + obj.id);
				return false;
			}
			this.viewLoading.status = true;
			var is_video = 0;
			//视频预览
			if( parseInt(obj.file_type) === 6 ){
				is_video = 1;
				this.isActive = false
			}
			//图片预览
			else if( parseInt(obj.file_type) === 3 ) {
				this.imgVisible  = true;
			}
			//文档预览
			else if( parseInt(obj.file_type) === 1 ){
				this.isPDFActive = false
			}
			//音频预览
			else if( parseInt( obj.file_type ) === 5 ){
				this.voiceVisible = true;
			}else{
				this.$message.warning("不支持预览的资源类型")
				return false;
			}
			let success = ( data => {
				var result  = data.data;
				//视频预览
				if( parseInt(result.file_type) === 6 ){
					this.videoView(result.path);
				}
				//图片预览
				else if( parseInt(result.file_type) === 3 ) {
					this.imgView(result.path);
				}
				//文档预览
				else if( parseInt(result.file_type) === 1 ){
					this.pdfView( result.path);
				}
				//音频预览
				else if( parseInt( result.file_type ) === 5 ){
					this.voiceView(result.path)
					//this.$message.warning("不支持预览的资源类型")
				}else{
					this.$message.warning("不支持预览的资源类型")
				}
			})
			let fail = (data => {
				this.viewLoading.status = false;
				this.$message.error(data.msg)
			})
			this.$ajax.get('api/resource/view_info',{params: {id:obj.id,is_video:is_video},func:{success:success,fail:fail}})

		},
		voiceView(url){
			this.voiceViewUrl = url;
			document.getElementById("voicepoauy").load();	
		},
		//pdf预览
		pdfView(url){
            this.viwPdfParam.src =  (url)
			// this.viwPdfParam.src =  pdf.createLoadingTask(url)
		},
		//视频预览
		videoView(url){
			this.showVideoPlayer = true;
			this.playParam.play_url = url;
		},
        /**
         * 查看图片
         * @param {Object} obj 记录信息
         */
        imgView(url) {
            this.imgViewUrl = url;
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = [url];
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
		downTest(id){
			var form = document.createElement("form");
			form.action = this.BASE_URL+'/index/test/download_test';			   
			form.method = 'post';
			form.style.display = "none";
			
			var opt_id = document.createElement("textarea");
			opt_id.name = 'id';
			opt_id.value = id;
			form.appendChild(opt_id);

			var opt_type = document.createElement("textarea");
			opt_type.name = 'type';
			opt_type.value = 0;
			form.appendChild(opt_type);

			var opt_format = document.createElement("textarea");
			opt_format.name = 'format';
			opt_format.value = 'word';
			form.appendChild(opt_format);

			var opt_template = document.createElement("textarea");
			opt_template.name = 'template';
			opt_template.value = 'A4';
			form.appendChild(opt_template);

			var opt_answer = document.createElement("textarea");
			opt_answer.name = 'answer';
			opt_answer.value = 'only_test';
			form.appendChild(opt_template);
			

			document.body.appendChild(form);
			form.submit();
			document.body.removeChild(form);
		},
		down(obj){
			var form = document.createElement("form");
			var type = parseInt(obj.origin) === 0 ? 0 : 1;
			form.action = this.BASE_URL+'/index/resource/resourcedownload';
			form.method = 'post';
			form.style.display = "none";
			
			var opt_id = document.createElement("textarea");
			opt_id.name = 'id';
			opt_id.value = obj.id;
			form.appendChild(opt_id);

			var opt_type = document.createElement("textarea");
			opt_type.name = 'type';
			opt_type.value = type;
			form.appendChild(opt_type);

			document.body.appendChild(form);
			form.submit();
			document.body.removeChild(form);
		},
		deleteFile(obj){
			let yes = ( data => {
				let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.listData.length - this.rowLen === 0) {
						if (this.listParam.page_index > 1) {
							this.listParam.page_index-- ;
						} else {
							this.listParam.page_index = 1;
						}
					}

					this.getList();
				});

				var params = {
					group_id: this.listParam.group_id,
					resource_id: obj.id,
					origin: obj.origin,
				}

				this.$ajax.delete('api/group/group_something', {params: params, func: {success: success}})
			})

			let cancel = ( data => {})
			this.e_confirm({yes: yes, cancel: cancel, txt: '确定将 ' + obj.name + ' 删除吗？'});
		},
		handleSizeChange(val) {
			this.listParam.page_index = 1;
			this.listParam.page_size = val;
			this.getList()
		},
		handleCurrentChange(val) {
			this.listParam.page_index = val;
			this.getList();
		},		
    }
}
</script>
<style lang="scss">
	.resource-management {
		.el-tabs__item.is-top {
			padding-left: 20px !important;
			padding-right: 20px !important;
		}

		.table-new-title {
			.el-table__body-wrapper table tbody {
				td:nth-child(4) {
					padding: 0;
				}
			}
		}
		.table-origin {
			.el-table__body-wrapper table tbody {
				td:nth-child(5) {
					padding: 0;
				}
			}
		}
		.masking{
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0,0,0,.3);
			z-index: 4;
			.maskingBox{
				position: absolute;
				top: 15%;
				left: 50%;
				width: 800px;
				margin-left: -400px;
				background: #fff;
			}
			.masking_h{
				padding: 10px 15px;
				background: #348EFC;
				text-align: center;
				text-align-last: justify;
				>span,
				>i{
					font-size: 16px;
					text-align-last: initial;
					display: inline-block;
					vertical-align: middle;
					color: #fff;
				}
				>i{
					cursor: pointer;
				}
			}

		}

		.pdfView{
			// padding: 30px;
            height: 70vh;
			max-height: 550px;
			overflow: hidden;
			overflow-y: auto;
		}
		.masking_c{
			.el-pagination{
				padding-bottom: 20px;
			}
		}

		.activeLive{
			opacity: 0;
			visibility: hidden;
		}

		.imgVisible{
			display: inline-block;
			vertical-align: middle;
			background: none;
			text-align: left;
			min-width: 550px;
			min-height: 550px;
			background: rgba(109, 116, 125, 0.78);
			margin: 0;
			.el-dialog__header{
				// display: none;
			}
			.el-dialog__body{
				text-align: center;
				padding: 0;
				img{
					max-width: 100%;
				}
			}
		}
		.el-dialog__wrapper{
			text-align: center;
		}
	}
	.resource-management{
		.el-table{
			margin-top: 30px;
		}
	}
</style>
